<template>
    <div class="max">
        <van-nav-bar title="我的京东" left-arrow @click-left="fun">
            <template #right>
                <van-icon name="ellipsis" size="26" />
            </template>
        </van-nav-bar>
        <div class="box">
            <img src="@/assets/touxiang.jpg" alt="">
            <span>我是如来佛祖玉皇大帝观音菩萨指定取西经特派使者花果山水帘洞美猴王齐天大圣孙悟空啊!帅到掉渣！</span>
            <span class="span" @click="fun3"><van-icon name="setting-o" size="30" /></span>
        </div>
        <div class="box1"></div>
        <div class="box2">
            <div class="box3">
                <span>商品收藏 1</span>
                <span>店铺收藏 2</span>
                <span @click="fun6">我的足迹2</span>
            </div>
            <div class="box4">
                <div class="box5" @click="fun1">
                    <van-icon name="pending-payment" size="35" />
                    <span>待付款</span>
                </div>
                <div class="box5" @click="fun2">
                    <van-icon name="send-gift-o" size="35" />
                    <span>待收货</span>
                </div>
                <div class="box5" @click="fun4">
                    <van-icon name="refund-o" size="35" />
                    <span>退还/售后</span>
                </div>
                <div class="box5" @click="fun7">
                    <van-icon name="description" size="35" color="#f93c2a" />
                    <span>全部订单</span>
                </div>
            </div>

        </div>
        <div class="box6">
            <div class="box7" @click="fun12">
                <strong>1</strong>
                <span>优惠券</span>
            </div>
            <div class="box7" @click="fun13">
                <strong>1000</strong>
                <span>白条</span>
            </div>
            <div class="box7" @click="fun10">
                <strong>0</strong>
                <span>京豆</span>
            </div>
            <div class="box7" @click="fun11">
                <strong>999</strong>
                <span>红包</span>
            </div>
            <div class="box7" @click="fun5">
                <van-icon name="pending-payment" size="20" color="#f93c2a" />
                <span>全部资产</span>
            </div>

        </div>
        <div class="box8">
            <img src="https://img12.360buyimg.com/img/s750x98_jfs/t1/137036/22/22941/72603/6216ec7aE4ba88584/ddbf5ebdb080083b.png.webp"
                alt="">
        </div>
        <div class="box9">
            <div class="box10" @click="fun9">
                <van-icon name="service-o" size="30" />
                <span>客户服务</span>
            </div>
            <div class="box10" @click="fun8">
                <van-icon name="todo-list-o" size="30" />
                <span>我的预约</span>
            </div>
        </div>
        <MyFooter></MyFooter>
        <div class="boxs">

        </div>
    </div>
</template>


<script>
import MyFooter from '@/components/JH/homepage/MyFooter.vue'

export default {
    components: {
        MyFooter

    },

    methods: {
        fun() {
            this.$router.push('/MyHome')
        },
        fun1() {
            this.$router.push('/Myorder')
        },
        fun2() {
            this.$router.push('/received')
        },
        fun3() {
            this.$router.push('/setting')
        },
        fun4() {
            this.$router.push('/mysales')
        },
        fun5() {
            this.$router.push('/asset')
        },
        fun6() {
            this.$router.push('/record')
        },
        fun7() {
            this.$router.push('/ShoppingCart')
        },
        //我的预约
        fun8() {
            this.$router.push('/MyAppointment')
        },
        //客户服务
        fun9() {
            this.$router.push('/CustomerService')

        },
        //红包
        fun10() {
            this.$router.push('/RedPacketPage')
        },
        //京豆
        fun11() {
            this.$router.push('/JingDouPage')
        },
        fun12() {
            this.$router.push('/coupon')
        },
        fun13() {
            this.$router.push('/baitiao')
        }


    }
}
</script>

<style scoped>
.max {
    background: #f5f5f5;
}

.box {
    height: 85.2px;
    background-color: rgb(251, 238, 240);
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 12px;
    color: gray;
}

.box img {
    height: 80px;
    margin-left: 10px;
    margin-right: 10px;
}

.box span {
    margin-left: 10px;
    margin-right: 10px;
}

.box1 {
    height: 56px;
}

.box2 {
    height: 95px;
    width: 94%;
    margin: auto;
    border-radius: 10px;
    background: #FFF;
}

.box3 {
    height: 34px;
    background: #fafafa;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    color: #1a1a1a;
}

.box4 {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.box5 {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 12px;
}

.box6 {
    height: 70px;
    background: #FFF;
    width: 94%;
    margin: 10px auto;
    border-radius: 10px;
    background: #FFF;
    display: flex;
    justify-content: space-around;
    text-align: center;

}

.box7 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 12px;
}

strong {
    font-size: 18px;
}

.box8 {
    text-align: center;
    margin-bottom: 10px;
}

.box8 img {
    width: 94%;

}

.box9 {
    height: 70px;
    background: #FFF;
    width: 94%;
    margin: 10px auto;
    border-radius: 10px;
    background: #FFF;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.box10 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 12px;
}

.boxs {
    height: 1000px;
}
</style>